<template>
  <div ref="swipercontainer" class="swiper-container" v-if="itemList.length">
   <!-- <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(item, index) in itemList" :key="index">
        <figure>
          <img :src="getImgPath(item.image_hash)" v-if="item.image_hash">
          <figcaption>{{item.food_name}}</figcaption>
        </figure>
      </div>
    </div>
    <div ref="swiperpagination" id="swiperpagination" class="swiper-pagination swiper-pagination-center"></div>-->
  </div>
</template>

<!--
<script type="text/ecmascript-6">
  import Swiper from 'swiper';
/*import Swiper from 'src/config/swiper.min'*/
  import {getImgPath} from 'src/components/common/mixin'
  export default {
  mixins: [getImgPath],
  props:['itemList','loop'],
  data(){
     return{}
   },
   created(){
   },
   mounted(){
     //注意初始化时机，时机不对，无法实例化无法滚动！
     this.initSwiper();
   },
   computed: {
   },
   methods: {
     initSwiper(){
       new Swiper(this.$refs.swipercontainer, {
         pagination: {
           el: this.$refs.swiperpagination
         },
         loop: true,
         /*焦距功能：双击slide会放大，并且在手机端可双指触摸缩放。*/
         zoom : true
       });
     }
   }
  }
</script>
<style scoped lang="scss" rel="stylesheet/scss">
  @import '../../../style/mixin';
  @import '../../../style/css/swiper.css';
  .swiper-container {
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    text-align: center;
    font-size: 18px;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    z-index: 99;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    img{
      padding:.6rem;
      width: 100%;
      height: 15rem;
    }
    figcaption{
      font-size: 12px;
      color: $fc;
    }
  }
  .swiper-pagination-center{
    width: 100%;
    text-align: center;
    .swiper-pagination-bullet{
      margin: 0 4px;
    }
    .swiper-pagination-bullet-active{
      background: $fc !important;
    }
  }

</style>
-->
